<template>
  <div class="container">
    <Navbar title="商家详情"></Navbar>
    <van-cell title="活动与属性" class="activity"></van-cell>
    <van-cell-group class="group">
      <van-cell title="已加入“外卖保”计划，食品安全有保障(APP专享)" center>
        <template #icon>
          <span style="background-color: rgb(153, 153, 153); color: #fff"
            >保</span
          >
        </template>
      </van-cell>
      <van-cell title="准时必达，超时秒赔(APP专享)" center>
        <template #icon>
          <span style="background-color: rgb(87, 169, 255); color: #fff"
            >准</span
          >
        </template>
      </van-cell>
      <van-cell title="该商家支持开发票，请在下单时填写好发票抬头" center>
        <template #icon>
          <span style="background-color: rgb(153, 153, 153); color: #fff"
            >票</span
          >
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell value="企业认证详细">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">食品监督安全公式</span>
      </template>
    </van-cell>
    <van-cell style="margin-bottom: 10px">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #icon>
        <img src="@/assets/images/smile.png" />
      </template>
      <span>监督检查结果：<i>良好</i></span>
      <p>检查日期：</p>
    </van-cell>
    <van-cell title="商家信息" class="activity"></van-cell>
    <van-cell title="效果演示"></van-cell>
    <van-cell
      title="地址：广东省广州市越秀区中山五路219号华联购物中心F1"
    ></van-cell>
    <van-cell title="营业时间：[8:30/20:30]"></van-cell>
    <van-cell title="营业执照" is-link @click="show = true"></van-cell>
    <van-cell title="餐饮服务许可证" is-link @click="show = true"></van-cell>
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false">
      <img src="../../assets/images/no-detail.png" />
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      show: false,
    }
  },
  computed: {},
  methods: {},
}
</script>

<style lang="less" scoped>
.container {
  p {
    margin: 0;
  }
  i:first-child {
    font-style: normal;
    color: #7ed321;
  }
  .activity {
    font-size: 18px;
  }
  .group {
    margin-bottom: 10px;
    .van-cell {
      span {
        font-size: 12px;
        padding: 0 2px;
        border-radius: 2px;
      }

      .van-cell__title {
        span {
          font-size: 14px !important;
          margin-left: 8px;
          color: #666;
        }
      }
    }
  }
  .van-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 300px;
      height: 300px;
    }
  }
}
</style>
